import Configer from "../../../script/frame/apiModel/config/Configer";
import {ThreeChooseOneModel} from "../model/GuiModel";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {IProps, IStates, View} from "../../../script/frame/apiModel/gui/React";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {
    ThreeChooseOneGoodRootInterface
} from "../../interface/GuiInterface";

interface IProp {
    getChooseItem: (player: PlayerModel, id: string) => ThreeChooseOneModel[];
}
interface IState {
    ids: {
        sourceId: string,
        ownerId: string,
    }[];
    currentOwnerId: string,
    threeChooseOneModels: ThreeChooseOneModel[];

    selectIndex: number;
    infoVisible: boolean;
    infoId: string;
    x: number;
    y: number;
}

export default  class ThreeChooseOneRoot extends ThreeChooseOneGoodRootInterface<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);
        this.state = {
            selectIndex: -1,
            ids: [],
            currentOwnerId: '',
            threeChooseOneModels: [],
            visible: false,
            infoId: '',
            infoVisible: false,
            x: 0,
            y: 0,
        }
    }

    getContentStyle = () => {
        const backSize = { h: 0.08300, w: 0.40000 };
        const backPos = { x: 0.38125, y: 0.33200 }
        return { width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }
    }

    getInfoPage = () => {
        return;
    }

    render = () => {
        const hidden = (this.state.threeChooseOneModels.length === 0)
        const style = this.getContentStyle();
        const infoPage = this.getInfoPage();
        let models: ThreeChooseOneModel[] = [];
        for (let i = 0; i < 3; i++) {
            const model = this.state.threeChooseOneModels[i];
            if (model) {
                models.push(model)
            } else {
                models.push({ id: undefined, Art: undefined, descript: '', name: '', reward: undefined })
            }
        }
        return <View   key={GuiKeys.threeChooseOneContent} style={{ ...style, hidden }}>
            {
                models.map(
                    (value, index, array) => {
                        return this.createElement(value, index);
                    }
                )
            }
            {
                infoPage
            }
        </View>
    }

    createElement = (model: ThreeChooseOneModel, index: number) => {
    }

    onSelect = (index: number) => {
        this.setState({
            ...this.state,
            selectIndex: index,
        })
    }

    toNextTask = () => {
        const state: IState & IStates = {
            ...this.state,
        }

        const len = this.state.ids.length;
        this.state.ids.shift();
        if (len > 1) {
            const tempIds = this.state.ids[0]
            const sourceId = tempIds.sourceId;
            const ownerId = tempIds.ownerId;
            state.threeChooseOneModels = this.props.getChooseItem(PlayerFactory.getInstance().getLocalPlayer(), sourceId);
            state.currentOwnerId = ownerId;
        } else {
            state.threeChooseOneModels = [];
        }
        this.setState(state)
    }

    addChooseTask = (id: string, ownerId: string) => {
        this.state.ids.push({ sourceId: id, ownerId: ownerId });

        const state: IState & IStates = {
            ...this.state,
        }
        const len = this.state.ids.length;
        if (len === 1) {
            // state.threeChooseOneModels = [{ Art: Configer.getUIConfig(ResourceKey.achBarBoard), descript: '详情！！！', id: 'e004', name: '测试道具' }, { Art: Configer.getUIConfig(ResourceKey.achBarBoard), descript: '详情！！！', id: 'e004', name: '测试道具' }, { Art: Configer.getUIConfig(UIConfigKey.achBarBoard), descript: '详情！！！', id: 'e004', name: '测试道具' }];
            state.threeChooseOneModels = this.props.getChooseItem(PlayerFactory.getInstance().getLocalPlayer(), id);
            state.currentOwnerId = ownerId;
        }
        this.setState(state)
    }
}